<template>
  <!-- 幼儿园的选项 -->
  <el-row :gutter="24" class="margin-10">
    <el-col :span="4">
      <div>
        幼儿园
      </div>
      <el-dropdown trigger="click" v-loading="filterLoading">
        <el-button>
          {{ selectedSchool.name }}
          <el-icon class="el-icon--right">
            <arrow-down/>
          </el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="selectSchool(school)" v-for="school in schoolList">
              {{ school.name }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-col>
    <el-col :span="4">
      <!--  班级的筛选-->
      <div>
        班级
      </div>
      <el-dropdown trigger="click" v-loading="filterLoading">
        <el-button>
          {{ selectedGroup.name }}
          <el-icon class="el-icon--right">
            <arrow-down/>
          </el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="selectGroup(group)" v-for="group in groupList">
              {{ group.name }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-col>
    <el-col :span="4">
      <div>
        {{ $t('loc.amtPd') }}
      </div>
      <el-dropdown trigger="click" v-loading="filterLoading">
        <el-button>
          {{ selectedPeriod.displayName }}
          <el-icon class="el-icon--right">
            <arrow-down/>
          </el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="selectPeriod(period)" v-for="period in periodList">
              <div style="width: 100%;display: flex;justify-content: space-between;">
                <span>
                {{ period.displayName }}
              </span>
                <span style="color: #f05050;" v-if="period.active === true"> {{ $t('loc.active') }}</span>
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-col>
    <el-col :span="4">
      <div>{{ $t('loc.assFwk') }}</div>
      <el-select class="w-full" v-loading="filterLoading" v-model="selectedFrameworkId" placeholder="评估框架" size="large" @change="selectFramework(selectedFrameworkId)">
        <el-option
            v-for="framework in frameworkList"
            :key="framework.id"
            :label="framework.name"
            :value="framework.id"
            style="width: 100%;display: flex;justify-content: space-between;"
        >
        </el-option>
      </el-select>
    </el-col>
  </el-row>

</template>
<script>
import {
  ArrowDown,
  Check,
  CircleCheck,
  CirclePlus,
  CirclePlusFilled,
  Plus,
} from '@element-plus/icons-vue'
import SchoolApi from '@/api/school'
import ChildApi from '@/api/child'

export default {
  name: "ReportFilterMenu",
  components: {
    ArrowDown,
    Check,
    CircleCheck,
    CirclePlus,
    CirclePlusFilled,
    Plus,
  },
  data() {
    return {
      filterData: {
        schools: [],
        groups: [],
        frameworks: [],
        periods: [],
      },
      children: [],
      selectedSchool: {},
      selectedGroup: {},
      selectedFramework: {},
      selectedPeriod: {},
      filterLoading: false,
      selectedFrameworkId: '',
    }
  },
  created() {
    this.getFilter()
  },
  watch: {
    selectedSchool: {
      immediate: true,
      handler() {

      }
    },
    selectedGroup: {
      immediate: true,
      handler(val, oldVal) {
        if (val && val.id) {
          if (oldVal && val.id === oldVal.id) {
            return
          }
          this.loadChildren(val.id)
        }
      }
    },
    selectedFramework: {
      immediate: true,
      deep: true,
      handler(val, oldVal) {
      }
    },
    selectedPeriod: {
      immediate: true,
      deep: true,
      handler(val, oldVal) {
      }
    },
  },
  computed: {
    schoolList() {
      return this.filterData.schools
    },
    groupList() {
      if (!this.selectedSchool.id) {
        return []
      }
      return this.filterData.groups.filter((group) => group.schoolId === this.selectedSchool.id)
    },
    frameworkList() {
      return this.filterData.frameworks
    },
    periodList() {
      return this.filterData.periods
    },
  },
  methods: {
    // 过滤条件
    getFilter() {
      this.filterLoading = true
      return SchoolApi.getStudentReportFilter().then((res) => {
        this.filterData = res
        this.selectedSchool = res.schools[0]
        this.selectedGroup = res.groups[0]
        this.selectedFrameworkId = res.frameworks[0].id
        this.selectedPeriod = res.periods.filter((period) => period.active)[0] || res.periods[0]
        this.$emit('frameworkChange', res.frameworks[0])
        this.$emit('periodChange', this.selectedPeriod)
      }).finally(() => {
        this.filterLoading = false
      })
    },
    // 选择幼儿园
    selectSchool(school) {
      this.selectedSchool = school
      // 当前选择的班级如果不是当前幼儿园的班级，则选择第一个班级
      if (this.selectedGroup.schoolId !== school.id) {
        this.selectedGroup = this.groupList[0]
      }
    },
    // 选择班级
    selectGroup(group) {
      this.selectedGroup = group

    },
    // 选择评估框架
    selectFramework(frameworkId) {
      this.selectedFrameworkId = frameworkId
      this.$emit('frameworkChange', this.frameworkList.find(item=>item.id === frameworkId))
    },
    // 选择评估周期
    selectPeriod(period) {
      this.selectedPeriod = period
      this.$emit('periodChange', this.selectedPeriod)
    },
    // 全部响应参数传递父组件
    loadChildren(groupId) {
      if (!groupId) {
        return
      }
      let params = {
        groupId: groupId,
      }
      ChildApi.getChildren(params).then(res => {
        this.children = res.children
        this.$emit('paramResult', this.children)
      }).catch(error => {
        this.$message.error(error.response.data.description)
      })
    },
  },

}
</script>

<style scoped lang="less">
.el-dropdown {
  width: 100%;

  .el-button {
    border: 1px solid rgb(220, 223, 230);
    width: 100%;
    overflow: hidden;
    height: 39px;
    padding: 0 16px;

    /deep/ span {
      width: 100%;
      justify-content: space-between;
    }
  }
}

/deep/ .el-dropdown-menu__item {
  min-width: fit-content;
  width: 270px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

</style>